import React, { useEffect, useState } from 'react';
import { Carousel, Row, Col, Card } from 'antd';
import { getBannerList, getAllCompanyIntroduce } from '@/api/setting/index'
import './index.less'

const options = [
  { label: '公司名称', value: 'name' },
  { label: '公司介绍', value: 'introduce' },
  { label: '公司架构', value: 'framework' },
  { label: '公司战略', value: 'strategy' },
  { label: '公司高层', value: 'manage' },
];

const Index = () => {
  const [bannerList, setBannerList] = useState([])
  const [inputValues, setInputValues] = useState({
    name: '',
    introduce: '',
    framework: '',
    strategy: '',
    manage: '',
  });

  const getBannerListData = async () => {
    try {
      getBannerList().then(res => {
        if (res.status === 0) {
          setBannerList(res.data)
        }
      })
    } catch (error) {
      console.log(error)
    }

  }

  const fetchData = async () => {
    getAllCompanyIntroduce().then((res) => {
      const data = res.data.reduce((acc, cur) => {
        const key = options.find((item) => item.label === cur.set_name).value
        if (cur.set_name === '公司名称') {
          acc[key] = cur.set_value
        } else {
          acc[key] = cur.set_text
        }
        return acc
      }, {})
      setInputValues(data)
    })
  };
  useEffect(() => {
    getBannerListData()
    fetchData()
  }, [])
  return (
    <div className='home-wrapped'>
      <div className='swiper-wrapped'>
        <Carousel arrows autoplay adaptiveHeight infinite={true}>
          {
            bannerList.map((item, index) => {
              return (
                <div key={index}>
                  <img className='swiper-item' src={item} />
                </div>
              )
            })
          }
        </Carousel>
      </div>
      <div style={{marginTop: '20px'}}>
        <Row>
          <Col span={6}>
            <Card
              title="公司介绍"
              bordered={false}
              style={{
                width: '98%',
              }}
            >
              <span>{inputValues.introduce}</span>
            </Card>
          </Col>
          <Col span={6}>
            <Card
              title="公司架构"
              bordered={false}
              style={{
                width: '98%',
              }}
            >
              <span>{inputValues.framework}</span>
            </Card>
          </Col>
          <Col span={6}>
            <Card
              title="公司战略"
              bordered={false}
              style={{
                width: '98%',
              }}
            >
              <span>{inputValues.strategy}</span>
            </Card>
          </Col>
          <Col span={6}>
            <Card
              title="高层介绍"
              bordered={false}
              style={{
                width: '98%',
              }}
            >
              <span>{inputValues.manage}</span>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Index;
